<template>
	<div>
		<Row>
			<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
			<Input class="w-100" v-model="searchKey.nickname" placeholder="请输入课程名称" />
			</Col>
		</Row>
		<Row>
			<div class="w-100 d-flex justify-content-end align-items-center ">
				<Button class="m-1" type="primary" shape="circle" @click="searchs" icon="ios-search">查询</Button>
			</div>
		</Row>
		
		<div v-if="this.pageInfo.data.length ==0" class="d-flex justify-content-center p-1">
			暂无数据
		</div>
		<div v-else>
		<div class="mt-1 ">
		  <Row>
		    <Col class="p-1" v-for="(row, index) in pageInfo.data" :xs="24" :sm="24" :md="12" :lg="8" :xl="6"
					:xxl="6">
					
		      <div class="text-xss rounded shadow overflow-hidden">
				  
		        <div class="p-2 bg-black-80 text-fuguang d-flex text-lg justify-content-start text-blod">
				  <span class="iconfont icon-kecheng pl-1"></span>
		          <span>{{row.akechengitem.itemname}}</span>
		        </div>
				
				<div class="p-2  bg-black-50 text-fuguang d-flex text-xss justify-content-end">
				  <span class="ml-1">{{row.skjlid}}</span>
				</div>
				
		        <div class="p-2  bg-black-50 text-fuguang d-flex text-xl justify-content-between">
				<div class="w-25  position-relative">
					<div class="padding-top-100"></div>
					<div class="position-absolute rounded-circle overflow-hidden top0" >
						<img class="w-100 h-100":src="row.client.headimg"/>	
					</div>
					<div class=" text-danhong text-center text-lg">{{row.client.nc}}</div>
		        </div>
				<div class=" text-fuguang ">
					<div class="text-center text-lg">
						<span class="iconfont icon-kaishishijian"></span>
						<span>{{row.st}}</span>
					</div>
					<div class="text-center text-lg">
						<span class="iconfont icon-wanchengshijian"></span>
						<span >{{row.et}}</span>
					</div>
				</div>
				
			   </div>
				<div class="p-2  bg-black-50 text-fuguang d-flex text-xxl justify-content-end">
			    <Button class="text-xss ml-2" type="primary" size="small" @click="show(row.skjlid)">详细</Button>

			  </div>
		      </div>
		    </Col>
		  </Row>
		</div>
		<div>
			<Page class="text-right mt-3" :page-size="pageInfo.pageSize" @on-change="pageSearch"
				:total="pageInfo.total" />
		</div>
		
		
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				searchKey: "",
				pageInfo: {
					currentPage: 1,
					pageSize: 12,
					total: 0,
					columnInfo: [
						{
							title: "上课记录编号",
							key: "skjlid",
						},
						{
							title: "客户昵称",
							key: "nc",
						},
						{
							title: "课程单节名称",
							key: "itemname",
						},
						{
							title: "操作",
							slot: 'action',
							width: 150
						}
					],
					data: []
				}
			}
		},
		methods: {
			init: function() {
				this.pageInfo.currentPage = 0;
				this.search();
			},
			newUser: function() {
				this.$router.push({
					path: "/client/new"
				})
			},
			show: function(skjlid) {
				this.$router.push({
					path: "/skjl/detail?id=" + skjlid
				})
			},
			remove: function(clientid) {
				this.message.confirm({
					title: "删除提示",
					content: "即将删除场馆，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/client/info",
							param: {
								clientid
							}
						}).then(data => {
							this.search();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			searchs: function() {
				this.pageInfo.currentPage = 1;
				this.search();
			},
			search: function() {
				this.http.get({
					url: "/skjl/page",
					param: {
						// 传一个当前页
						current: this.pageInfo.currentPage,
						size:this.pageInfo.pageSize,
						searchKey:this.searchKey      
					}
				}).then(data => {
					console.log(data.records);
					this.pageInfo.data = data.records;
					this.pageInfo.currentPage = data.current;
					this.pageInfo.total = data.total;
					this.pageInfo.pageSize = data.size;
				});
			},
			pageSearch: function(changedPage) {
				this.pageInfo.currentPage = changedPage;
				this.search();
			}
		},
		created: function() {
			this.init();
		}
	}
</script>

<style>

</style>